<template>
    <div>
        <div class="jc">
            <span>
                <h2>管理员添加</h2>
            </span>
        </div>
        <div style="margin:5px;width:40%;display: flex;justify-content: space-between;margin-top:10px">
            <div>
                <el-form ref="user" :model="user" :rules="rules">
                    <el-form-item prop="nickname">
                        <el-input placeholder="请输入内容" v-model="user.nickname">
                            <template slot="prepend">用户名</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="account">
                        <el-input placeholder="请输入内容" v-model="user.account">
                            <template slot="prepend">账号</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入内容" v-model="user.password" type="password">
                            <template slot="prepend">密码</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input placeholder="请输入内容" v-model="user.phone">
                            <template slot="prepend">手机号</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width:40%">
                <el-upload ref="my_upload" class="avatar-uploader" :multipe="false"
					    :show-file-list="true" :auto-upload="false"
						:file-list="fileList"							
						:on-change="handleChange"
						action = "uploadAction"
						list-type="picture"
						accept="image/jpg,image/jpeg">
						<h2>点击这里上传图片</h2>
					</el-upload>
            </div>
        </div>
        <div style="margin:20px 5px">
            <el-button @click="res('user','my_upload')" type="primary">重置</el-button>
            <el-button @click="add('user','my_upload')" type="success">添加</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                user:{nickname:'',account:'',password:'',phone:''},
                fileList:[],
                rules:{
                    nickname:[
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    phone:[
                        {required: false ,type: 'number', message: '手机号必须为数字值',
                        transform(value){ return Number(value)}}
                    ],
                    account:[
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods:{
            handleChange(file,filelist){
                this.fileList = filelist;
            },
            add(formName,updateName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let fd = new FormData();
                        let fs = this.fileList;
                        if(fs.length>0 && fs[0].raw != null){
                            fd.append("pic",fs[0].raw)
                        }
                        for (const key in this.user) {
                            fd.append(key,this.user[key])
                        }
                        var that =this
                        this.$postFile("/api/adm/user/addAdm",fd)
                        .then(function(resp){
                            that.$refs[formName].resetFields();
                            that.$refs[updateName].clearFiles();
                            that.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                        })
                    } else {
                        this.$message.error('请通过验证再添加');
                        return false;
                    }
                });
            },
            res(formName,updateName){
                this.$refs[formName].resetFields();
                this.$refs[updateName].clearFiles();
            }
        },
        mounted(){

        }
    }
</script>
<style scoped="scoped">
.jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
</style>
